<template>
    <div>
      <el-form :model="queryParams" class="frominfo" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <div class="from-item">
            <el-form-item label="微信名称" prop="wcName">
              <el-input v-model="queryParams.wcName" @keyup.enter.native="handleQuery" placeholder="好友微信名称" clearable/>
            </el-form-item>
            <el-form-item label="微信号" prop="wcNumber">
              <el-input v-model="queryParams.wcNumber" @keyup.enter.native="handleQuery" placeholder="好友微信号" clearable/>
            </el-form-item>
            <el-form-item label="所属助手" prop="assistName">
              <el-input v-model="queryParams.assistName" @keyup.enter.native="handleQuery" placeholder="请输入所属助手" clearable/>
            </el-form-item>
            <el-form-item label="好友标签" prop="lableName">
              <el-select v-model="queryParams.lableName" placeholder="请选择" clearable>
                <el-option v-for="dict,index in lable" :key="index" :label="dict"
                  :value="dict" />
              </el-select>
            </el-form-item>
        </div>
        <div class="from-Btn">
          <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </div>
      </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" style="background-color: #0078fb;color: #fff;border-color: #0078fb;" icon="el-icon-folder-add" size="mini" @click="handleAdd">添加人员</el-button>
      </el-col>  
      <el-col :span="1.5">
        <el-button type="primary" style="background-color: #0078fb;color: #fff;border-color: #0078fb;" icon="el-icon-folder-delete" size="mini" @click="handleUpdate">批量删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="primary" style="background-color: #0078fb;color: #fff;border-color: #0078fb;" icon="el-icon-s-tools" size="mini" @click="handleTimed" v-hasPermi="['sk-module-moments:wcmoments:edit']">设置定时</el-button>
      </el-col> -->
    </el-row>
    <el-table v-loading="loading" :data="wcMomentsList" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#fcfcfd', color: '#000' }" :border="false">
      <el-table-column type="selection" width="55" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="微信名称" prop="wcUserName" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="发布朋友圈时间" prop="maxCreateTime" align="center" :show-overflow-tooltip="true" width="180">
            <template slot-scope="scope">
                <span>{{ parseTime(scope.row.maxCreateTime, '{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
      </el-table-column>
      <el-table-column label="所属营销助手" prop="assistName" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="标签" prop="lableNames" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-for="item,index in scope.row.lableNames" :key="item">{{ index!=0?';':''}}{{ item }}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信号" prop="wcUserNumber" align="center" :show-overflow-tooltip="true"/>
    </el-table>
    

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>

    <!-- 添加人员 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <selfriend style="height: 650px;" @addSelect="resetQuery"></selfriend>
    </el-dialog> 
    <!-- 设置定时 -->
    <!-- <el-dialog :title="title" :visible.sync="opens" width="500px" append-to-body>
      <div class="dia-box">
          <span style="margin-bottom: 20px;font-size: 15px;color: #000;">设置点赞开始时间</span>
          <div class="dia-info">
              <span style="margin-right: 10px;"><span style="color: #ff6d6f;">*</span>执行时间</span>
              <el-radio-group v-model="addTimed.wcTimedTasks.executionType">
                <el-radio :label="0">立刻执行</el-radio>
                <el-radio :label="1">定时执行</el-radio>
              </el-radio-group>
          </div>
          <div class="dia-info" v-show="addTimed.wcTimedTasks.executionType==1">
            <span>点赞开始时间：</span>
            <el-date-picker
              v-model="addTimed.wcTimedTasks.satartDate"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
          <div class="dia-info">
            <span>点赞循环时间：</span>
            <el-select v-model="addTimed.wcTimedTasks.loopTime" placeholder="请选择循环时间" clearable>
              <el-option v-for="dict in dict.type.sys_live_time" :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>  -->
    </div>
  </template>
  
  <script>
  
  import request from '@/utils/request'
  import selfriend from '../components/select_friend.vue'
  export default {
    name: "WcGroupsInfo",
    dicts: ['sys_live_time'],
    components:{
      selfriend,
    },
    data() {
      return {
        indexCount:[{name:'今日好友新增动态',num:1,type:1,bili:9.8},{name:'未点赞动态',num:4,type:0,bili:5.7}],
         // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 微信朋友圈信息表格数据
        wcMomentsList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        opens:false,
        chatTime:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          wcId: null,
          assistName:null,
          wcNumber:null,
          wcName: null,
          lableName: null,
          liveControlState:1,
        },
        addTimed:{
          "wcFriendInfoList":[],
          "wcTimedTasks": {
                "taskType": 3, //任务类型 (0:添加好友任务 1：定时任务  2:群发任务 3:点赞设置)
                "executionType": 1, //执行类型不能为空
                "executeTime": null, //执行时间
                "loopTime":null,//循环时间
                "satartDate": null //开始执行时间//定时执行的时候传该值,该值和executeTime保持一致
          }
        },
        lable:[],
      }
    },
    created() {
    },
    mounted() {
      this.getList();
      this.getLable()
    },
    methods: {
      golink(){
        //query
        this.$router.push({name:'friend_details'}).catch(()=>{});
      },
      getLable(){
        getLableInfo().then(res=>{
          //console.log(res)
          if(res.code==200){
            this.lable=res.data.map(item => {
              return item.lableName
            })
          }
        })
      },
      /** 查询微信朋友圈信息列表 */
      getList() {
        this.loading = true;
        listWcMoments(this.queryParams).then(res => {
          if (res['code']==200) {
            const dt = res['data'];
            this.total = dt['total'];
            this.wcMomentsList = dt['rows'];
          }
          this.loading = false;
        });
        setTimeout(()=>{
          this.loading = false;
        },2000)
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.opens=false
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.liveControlState=1
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.addTimed.wcFriendInfoList= selection.map(row => {
                const itemArr={
                  "wcId": row.wcId, 
                  "wcName": row.wcName, 
                  "wcUserId":row.wcUserId,
                  "wcUserName": row.wcUserName, 
                }
              return itemArr
        })
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        const id = row.id || this.ids;
        if(id==''||id==null){
          this.$message({
            message: '请选择要删除的微信！',
            type: 'warning'
          });
        }else{
          updateWcFriendInfo({"ids":id,"liveControlState":0}).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
        }
      },
      handleAdd(){
        this.open = true;
        this.opens=false;
        this.title = "添加点赞好友";
      },
      handleTimed(){
        const ids=this.ids
        //console.log(ids)
        if(ids==''||ids==null){
          this.$message({
            message: '请选择要点赞的微信！',
            type: 'warning'
          });
          return
        }
        this.open=false;
        this.opens = true;
        this.title = "设置定时点赞";
      },
      /** 提交按钮 */
      submitForm() {
        this.open=false;
        this.opens = false;
        //console.log(this.addTimed)
      },
    }
};

/** js请求 调用 */

// 查询微信朋友圈信息详细
export function listWcMoments(query) {
  return request({
    url: '/arbit/wcuser_info/GetFriendInfoList',
    method: 'POST',
    params: query
  })
}

// 修改设置监听信息
export function updateWcFriendInfo(data) {
  return request({
    url: '/arbit/wcuser_info/UpFriendInfoLiveState',
    method: 'post',
    data: data
  })
}
// 获取微信标签信息
export function getLableInfo() {
  return request({
    url: '/wxassistant/wcuser_lable_copy/pagex',
    method: 'get',
  })
}
</script>
  <style scoped lang="scss">
    .app-container{
      background-color: #f6f9fb;
    }
    .frominfo{
      display: flex;background-color: #fff;padding: 10px;padding-bottom: 0; margin-bottom: 20px;
      .from-item{
        display: flex;flex-wrap: wrap;
      }
      .from-Btn{
        display: flex;flex-direction: column;align-items: center;justify-content: center;width: 20%;
      }
    }
    .linebtn{
          display: flex;
          margin: -10px 0 10px 5px;
          height: 38px;
          .btn{
              width: 110px;
              text-align: center;
              line-height: 38px;
              font-size: 14px;
              color: #8c8c8c;
              margin-right: 10px;
              border: 1px solid #eaeff2;
              background-color: #fff;
              border-radius: 5px;
              .link-type{
                color: #8c8c8c;
              }
          }
          .select{
              background-color: #eaf6ff;
              border:1px solid #288dfc;
              color: #288dfc;
              font-weight: 550;
          }
    }
    .dia-box{
      color: #333;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      padding-left:40px;
      .dia-info{
        display: flex;align-items: center;margin-bottom: 20px;padding-left: 20px;
      }
    }
  </style>